<template lang="">
    <div>
        <div class="box-center transfer">
            <el-transfer v-model="major" :titles="['可选专业','已选专业']" :props="{key:'majorId',label:'majorName'}"
                :data="$store.state.form.major" :button-texts="['弃选','选中']" filterable></el-transfer>
        </div>
        <div class="button-group-emit">
            <el-button type="primary" @click="nextStep">下一步</el-button>
        </div>
    </div>
</template>
<script>
    import { mapActions } from 'vuex'
    export default {
        name: 'Step2',
        data() {
            return {
                major: []
            };
        },
        methods: {
            ...mapActions(['getMajor']),
            nextStep() {
                if (this.major.length == 0) {
                    this.$message({
                        message:'请先选择专业',
                        type:'warning'
                    })
                } else {
                    console.log(this.major);
                    this.$store.commit('nextStep', 2)
                    this.$router.replace('step3')
                    this.$store.commit('setUserSelected', { key: 'major', arr: this.major })
                }
            }
        },
        mounted() {
            let departments = this.$store.state.userSelected.department
            for (let i = 0; i < departments.length; i++) {
                this.getMajor(departments[i])
            }
        },
    }
</script>
<style scoped>
    .transfer {
        width: 650px;
    }

    .button-group-emit {
        margin-top: 10px;
    }
</style>